<template>
  <n-space class="page-product-search-list" vertical>
    <n-form class="form" :model="params" inline label-placement="left">
      <n-grid x-gap="12">
        <n-form-item-gi label="分类" :span="4">
          <n-select
            v-model:value="params.category"
            :options="categoryOptions"
          />
        </n-form-item-gi>

        <n-form-item-gi label="产品名称" :span="4">
          <n-input v-model:value="params.search" />
        </n-form-item-gi>

        <n-form-item-gi :span="4">
          <n-space>
            <n-button type="primary" @click="$refs.tableRef.fetchData()">
              查询
            </n-button>
            <n-button @click="handleReset">重置</n-button>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>

    <basic-table-new
      ref="tableRef"
      api="http://localhost:3001/admin/pro/searchPro"
      apiMethod="POST"
      :apiParams="params"
      :columns="columns"
    ></basic-table-new>
  </n-space>
</template>

<script>
import { h } from "vue";
import { NImage } from "naive-ui";
import { getCategory } from "@/api/product";

export default {
  data() {
    return {
      columns: [
        {
          title: "产品图片",
          key: "img1",
          render: (row) =>
            h(NImage, {
              height: 100,
              src: row.img1,
            }),
        },
        { title: "产品名称", key: "proname" },
        { title: "产品分类", key: "category" },
        { title: "产品品牌", key: "brand" },
        { title: "产品原价", key: "originprice" },
        { title: "产品折扣", key: "discount" },
        { title: "产品销量", key: "sales" },
        { title: "产品库存", key: "stock" },
      ],
      params: {
        // 分类
        category: "",
        // 搜索关键子
        search: "",
      },
      // 分类数据
      categoryOptions: [
        // { label: "手机", value: "手机" },
        // { label: "家电", value: "家电" },
      ],
    };
  },

  methods: {
    // 表单重置
    handleReset() {
      this.params.category = "";
      this.params.search = "";
    },
  },

  async mounted() {
    const response = await getCategory();
    this.categoryOptions = response.data.map((item) => ({
      label: item,
      value: item,
    }));
  },
};
</script>

<style lang="scss" scoped>
.form {
  padding: 8px 16px;
  background-color: #fff;
}
</style>
